$cf:#EC1D3F;
$bg:#f5f5f5;
$blue:#1677FF;
@mixin bbs() {
  box-sizing: border-box;
}
//calc适应，兼容
@mixin cl ($aa,$bb,$cc) {
  #{$aa}: calc(#{$bb} - #{$cc});
}
@mixin lol($name,$n,$pd){
  #{$name}{
    //width: calc(#{percentage(1/$n)} - #{($n - 1) / $n  * $pd});
    margin:0 $pd $pd 0;
  }
  #{$name}:nth-of-type(#{$n}n){margin-right: 0;}
  %nnn{margin-bottom: 0;}
  // @for $i from 1 through $n {
  //  #{$name}:nth-last-of-type(#{$i}){@extend %nnn;}
  // }
}
.w100{
  width: 100%;
}
.disabledClick {
  color: #999;
}
.borderFormList.formList {
  box-sizing: border-box;
  //padding: 50rpx;

  .inputItem {
    width: 100%;
    padding: 0;
    display: block;
    margin-bottom: 30rpx;
    border-bottom: 0;

  }

  .list_label{
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 20rpx;
  }
  .theInput{
    box-sizing: border-box;
    padding: 0 30rpx;
    border:1rpx solid #eee;
    height: 80rpx;
    border-radius: 10rpx;
    &.noBorder{
      padding: 0;
      border: 0;
      height: auto;
    }
    uni-textarea{
      width: 100%;
      height:100rpx;
      padding: 20rpx;
      box-sizing: border-box;
      border:1rpx solid #eee;
      border-radius: 8rpx;
      //text-indent: 1em;
    }
    //#ifdef MP-WEIXIN
    textarea{
      width: 100%;
      height:100rpx;
      padding: 20rpx;
      box-sizing: border-box;
      border:1rpx solid #eee;
      border-radius: 8rpx;
    }
    //#endif
  }
  .isRequired{
    display: none !important;
  }

  .formListItem:nth-last-of-type(1) .inputItem{
    margin-bottom: 0;
  }
}

.formList {
  width: 100%;
  .formList_clear{
    $w:36rpx;
    $s:1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: $w;
    line-height: $w;
    border-radius: $w;
    /*transform: scale($s,$s);*/
    text-align: center;
    color: #C3C9CE;
    font-size: 32rpx;
  }
  .formPreCheck{
    $w:30rpx;
    width: $w;
    height: $w;
    font-family: iconfont;
    //border:1rpx solid #aaa;
    border-radius: 4rpx;
    margin-right: 10rpx;
    &.check{
      border-color: #f00;
    }
    &.noBorderCheck{
      border: 0;
    }

  }
  .input_clear{
    font-family: 'iconfont';
    color: #aaa;
    &:before {
      content: "\e689";
      color: #aaa;
    }
  }
  .input_eye{
    margin-left: 28rpx;
    &.dark{
      color: #333333;
    }
  }
  .yzm_clear{
    margin-right: 30rpx;
  }


  .sw{
    position: relative;
    width: 100%;
    height: 60rpx;
    .s{
      position: absolute;
      right: 0;
    }

  }
  .formListImg{
    $sq:64rpx;
    display: flex;
    align-items: center;
    .img{
      width:$sq;
      height:$sq;
    }
    .yuan{
      border-radius: 50%;
    }
  }
  .formCheckBox{
    display: flex;
    flex-wrap: wrap;
    .formCheckBox_item{
      display: flex;
      align-items: center;
      margin:0 16rpx 16rpx 0;
      &:first-child{
        margin-left: 0;
      }
    }
    .formCheckBox_state{
      $w:30rpx;
      width: $w;
      height: $w;
      font-family: iconfont;
      //border:1rpx solid #aaa;
      border-radius: 4rpx;
      margin-right: 10rpx;
      &.check{
        border-color: #f00;
      }
      &.noBorderCheck{
        border: 0;
      }

    }
  }
  .formList_upfile{
    $w:120rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10rpx;
    //@include lol('.formList_imgitem',4,'10rpx');
    .formList_imgitem{
      $n:4;
      $pd:24rpx;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 25%;
      height: 0;
      //padding: 6rpx;
      padding-top: 25%;
      @include bbs();
      .formList_mid{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        @include bbs();
        border: 10rpx solid transparent;
      }
      .formList_border{
        @include bbs();
        width: 100%;
        height: 100%;
        padding: 6rpx;
        border: 2rpx solid #eee;
        border-radius: 6rpx;
      }
      .formList_filetype{
        @include bbs();
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20rpx;
        .formList_filetype_in{
          width: 100%;
          font-size: 24rpx;
          word-break:break-all;
          text-align: center;
        }
      }
      .formList_img{
        width: 100%;
        height: 100%;
      }
    }
    .formList_imgdel{
      $q:40rpx;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: $q;
      height: $q;
      line-height: $q;
      border-radius: $q;
      font-size: 20rpx;
      text-align: center;
      background: rgba(0,0,0,0.7);
      transform: scale(0.7);
      color: #fff;
    }
    .formList_imgadd{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50rpx;
      border: 2rpx solid #eee;
      border-radius: 6rpx;
      color: #aaa;
    }
  }
  .formList_signature{
    position: relative;
    width: 100%;
  }
  uni-textarea{
    width: 100%;
    min-height: 100rpx;
  }
  .formListItem {
    position: relative;
    box-sizing: border-box;
    //padding: 0 30rpx;
    font-size: 32rpx;
  }

  .formListItem:nth-last-of-type(1)>.inputItem {
    /*border-bottom: none;*/
    // background-color: red;
  }
  .dateValue{
    width: 100%;

  }

  // 分割线
  .formList_line {
    width: 100%;

    .line {
      width: 100%;
      //background: #f5f5f5;
    }
  }

  .inputItem {
    display: flex;
    position: relative;
    padding: 34rpx 0;
    border-bottom: 1rpx solid #E8E8E8;
    &.fromNoMid{
      .isRequired{
        display: block;
        top:22rpx;
      }
      .list_label{
        display: block;
      }

    }

    .list_label {
      display: flex;
      flex-shrink: 0;
      padding-right: 30rpx;
      align-items: center;
      .list_label_in{
        width: 100%;
        font-size: 30rpx;
        color: #202225;
      }
    }
    /*.list_label::after{*/
    /*	width: 0;*/
    /*	display: inline-block;*/
    /*	content: '';*/
    /*}*/
    .labelReq.list_label{
      padding-left: 30rpx;
    }

    .theInput {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    input{
      position: relative;
      z-index: 1;
      flex-shrink: 1;
      width: 100%;
    }

    &.yzm {
      .send {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        /*position: absolute;*/
        /*top: 20rpx;*/
        /*right: 0;*/
        /*z-index: 100;*/
        /*width: 6em;*/
        font-size: 30rpx;
        text-align: right;
        color: $blue;
      }
      .yzml{
        display: inline-block;
        width: 2rpx;
        height: 44rpx;
        margin: 0 24rpx;
        background: #E5EAED;
      }

      .send.disabledClick {
        color: #999;
      }
    }

    .inputReq {
      box-sizing: border-box;
      padding-left: 30rpx;
    }

    // 星号
    .isRequired {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      line-height: 56rpx;
      width: 30rpx;
      //color: $cf;
      .isRequiredIn{
        position: relative;
        //top: 4rpx;
        line-height:1.6;
      }
    }
  }

  .rightClick {
    margin-left: 10rpx;
    flex-shrink: 0;
    color:$cf;
  }
}
.formListAdd{
  position: absolute;
  left: 100%;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  .itemAdd{
    $sq:30rpx;
    width: $sq;
    height: $sq;
    margin-left: 10rpx;
    line-height: $sq;
    border: 1rpx solid #eee;
    text-align: center;
  }

}
.form_textArea{
  width: 100%;
  .inTextArea{
    width: 100%;
  }
  .textarea_num{
    color:#999;
    text-align: right;
  }
}
